<template>
	<div class="main">
		<div class="table">
			<div class="header">
				<el-button @click="show = true" :class="show ? 'btn':''">日汇总</el-button>
				<el-button @click="show = false" :class="show ? '':'btn'">月汇总</el-button>
			</div>
			<el-table
				ref="table"
			    :data="tableData"
			    style="width: 100%"
			    @selection-change="handleSelectionChange"
				:cell-class-name="tableRowClassName" 
				empty-text="暂无数据"
			  >
			    <el-table-column prop="time" label="日期" width="320" />
			    <el-table-column :prop="show ? 'price': 'mprice'" label="收入" width="320" />
				<el-table-column :prop="show ? 'outlay':'moutlay'" label="支出" width="320" />
			    <el-table-column prop="text" label="备注" width="320"/>
				
			  </el-table>
		</div>
	</div>
</template>
<script>
	import mockjs from "@/mockjs/index.js"
	import { ElMessage, ElMessageBox } from 'element-plus'
	// import * as XLSX from 'xlsx'
	
	export default{
		data(){
			return{
				tableData:'',
				list:'',
				list2:'',
				show:true,
			}
		},
		methods:{
			tableRowClassName({row,column,rowIndex,columnIndex}){
				// 把每一行的索引放进row和index
				row.index = rowIndex;
				column.index = columnIndex;
			},
			getTime(time){
				var date = new Date(time);
				var y = date.getFullYear();
				var m = date.getMonth()+1;
				m = m < 10 ? ('0'+m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0'+d) : d;
				let time2 = y + '-' + m + '-' + d 
				return time2
			},
		},
		mounted(){
			this.tableData = mockjs.getTradeList()
			console.log(this.tableData);
			this.list = this.tableData
			this.list2 = this.tableData
		}
	}
</script>

<style scoped>
	.main{
		display: flex;
		flex-wrap: wrap;
		background-color: white;
		flex-direction: column;
		
	}

.header .el-button{
	margin: 0;
	border-top-right-radius: 0;
}

.header .el-button:active{
	color: aqua;
}
.header{
	border-bottom: 1px solid #ebeef5;
}
.table{
	margin:20px 20px 0;
}
.btn{
	color: #7aaada;
	border-bottom: 0;
}
</style>